<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/index.css"/>
    <title></title>
</head>
<body>
<div id="page">
    <div class="top">
		<label for="input" class="input">上传文件</label>
        <input id="input" type="file" multiple="multiple" value="上传" style="display: none;" onchange="handleFile()">
        <button class="btn" type="submit" @click="onFile()">提交</button>
		<span class="fileName">
			<span id="fileName" class="fileName-text" style="display: block;">文件名称：</span>

  </span>
  			<div id="flag" data-loader="rectangle" style="display: none;margin-left: 36px;"></div>
    </div>

    <div class="content">
        <div style="width:60%">
            <span class="bt">中间交工证书</span>
            <div class="left">
                <img class="img" :src="model.base64" alt="">
            </div>
        </div>
        <div style="width:38%">
            <span style="display:flex;height: 24px;margin-bottom: 10px;"></span>
            <div class="right">
                <div class="right-title">
                    <span class="title-text">结构化内容</span>
                </div>
                <form class="form">
                    <div class="form-box">
                        <span class="form-box-title">类目：</span>
<!--                        <input disabled class="form-box-ipt" :value="model.contentClass">-->
                        <textarea disabled class="form-box-ipt" :value="model.contentClass"></textarea>
                    </div>
                    <div class="form-box">
                        <span class="form-box-title">项目名称：</span>
<!--                        <input disabled class="form-box-ipt" :value="model.entryName">-->
                        <textarea disabled class="form-box-ipt" :value="model.entryName"></textarea>
                    </div>
                    <div class="form-box">
                        <span class="form-box-title">施工单位：</span>
<!--                        <input disabled class="form-box-ipt" :value="model.constructionUnit">-->
                        <textarea disabled class="form-box-ipt" :value="model.constructionUnit"></textarea>
                    </div>
                    <div class="form-box">
                        <span class="form-box-title">合同段：</span>
<!--                        <input disabled class="form-box-ipt" :value="model.contract"/>-->
                        <textarea disabled class="form-box-ipt" :value="model.contract"></textarea>
                    </div>
                    <div class="form-box">
                        <span class="form-box-title">监理单位：</span>
<!--                        <input disabled class="form-box-ipt" :value="model.supervisor"/>-->
                        <textarea disabled class="form-box-ipt" :value="model.supervisor"></textarea>
                    </div>
                    <div class="form-box">
                        <span class="form-box-title">单位工程：</span>
<!--                        <input disabled class="form-box-ipt" :value="model.unitProject"/>-->
                        <textarea disabled class="form-box-ipt" :value="model.unitProject"></textarea>
                    </div>
                    <div class="form-box">
                        <span class="form-box-title">分部工程：</span>
<!--                        <input disabled class="form-box-ipt" :value="model.partProjec"/>-->
                        <textarea disabled class="form-box-ipt" :value="model.partProjec"></textarea>
                    </div>
                    <div class="form-box">
                        <span class="form-box-title">分项工程：</span>
                        <textarea disabled class="form-box-ipt" :value="model.subWorks"></textarea>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#page',
        data() {
            return {
                // url: 'http://127.0.0.1:8090/ocrImage/ocrImage/file/add',
                // url: 'http://192.168.31.191:8090/ocrImage/ocrImage/file/add',
                url: 'http://192.168.31.202:8090/ocrImage/ocrImage/file/add',
                model: {}
            }
        },
        methods: {
            onFile() {
                var obj = document.getElementById('input')
                if (obj.files.length ==0){
                    alert("请上传pdf扫描件！！！")
                    return
                }
                document.getElementById('flag').style.display = "block"
                // 获取到上传的文件
                var myFile = obj.files[0];
                console.log(myFile);
                // 获取到文件不能直接传给后端
                // 利用formData传给后端
                var formData = new FormData();
                formData.append('file', myFile); // 'image'要和后端接口需要的参数名一致
                // 上传文件接口
                axios.post(this.url, formData).then((resp) => {
                    let result = resp.data.success;
                    if (result) {
                        this.model = resp.data.result
                        // console.log("model:", this.model)
                        document.getElementById('flag').style.display = "none"
                    } else {
                        alert(resp.data.message)
                    }
                });
            },
        }
    })

    function handleFile(){
        //展示上传的文件名字
        var obj = document.getElementById("input");
        var length = obj.files.length;
        //当有文件上传时显示文件名
        if(length > 0){
            document.getElementById("fileName").innerHTML="文件名称："+obj.files[0].name
        }
    }

</script>

</body>
</html>
